<!DOCTYPE html>
<html>
<head>
	<title>注册</title>
	<script type="text/javascript" src="vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<link rel="stylesheet" type="text/css" href="elementui.min.css">
	<script type="text/javascript" src="elementui.min.js"></script>
	<style type="text/css">
		.bjw{
			width: 200px;
		}
	</style>
</head>
<body>
	<div id="root">
		<el-button type="success" icon="el-icon-plus" @click="tianjia=true">添加员工</el-button>
			<el-dialog title="添加员工" :visible.sync="tianjia" width="600px">
				<el-form label-width="90px">
				  	<el-form-item label="姓名">
	    				<el-input v-model="tj.name"></el-input>
	  				</el-form-item>
	  				<el-form-item label="性别">
		  				<template>
	  						<el-radio v-model="tj.sex" label="1">男</el-radio>
	  						<el-radio v-model="tj.sex" label="0">女</el-radio>
						</template>
					</el-form-item>
	  				<el-form-item label="出生日期">
	    				<el-date-picker v-model="tj.birthday" type="date" placeholder="选择日期"></el-date-picker>
	  				</el-form-item>
	  				<el-form-item label="部门">
	    				<el-input v-model="tj.department"></el-input>
	  				</el-form-item>
	  				<el-form-item label="在职状态">
	    				<el-switch v-model="status" active-text="在职" inactive-text="离职"></el-switch>
	  				</el-form-item>
	  				<el-form-item label="入职时间">
	    				<el-date-picker v-model="tj.joinDate" type="date" placeholder="选择日期"></el-date-picker>
	  				</el-form-item>
	  				<el-form-item label="工资">
	    				<el-input v-model="tj.salary"></el-input>
	  				</el-form-item>
	  				<el-form-item label="身份证号码">
	    				<el-input v-model="tj.IDCard"></el-input>
	  				</el-form-item>
	  				<el-form-item label="手机号码">
	    				<el-input v-model="tj.number"></el-input>
	  				</el-form-item>
  				</el-form>
			   	<div slot="footer">
			    	<el-button @click="tianjia = false">取 消</el-button>
			   		<el-button type="primary" @click="zc">确 定</el-button>
			   	</div>
			</el-dialog>
			<el-dialog title="添加员工" :visible.sync="bianji" width="600px">
				<el-form label-width="90px">
					<el-form-item label="员工编号">
	    				<el-input v-model="bj.ID" :disabled="true"></el-input>
	  				</el-form-item>
				  	<el-form-item label="姓名">
	    				<el-input v-model="bj.name"></el-input>
	  				</el-form-item>
	  				<el-form-item label="性别">
		  				<template>
	  						<el-radio v-model="bj.sex" label="1">男</el-radio>
	  						<el-radio v-model="bj.sex" label="0">女</el-radio>
						</template>
					</el-form-item>
	  				<el-form-item label="出生日期">
	    				<el-date-picker v-model="bj.birthday" type="date" placeholder="选择日期"></el-date-picker>
	  				</el-form-item>
	  				<el-form-item label="部门">
	    				<el-input v-model="bj.department"></el-input>
	  				</el-form-item>
	  				<el-form-item label="在职状态">
	    				<el-switch v-model="bj.status" active-text="在职" inactive-text="离职"></el-switch>
	  				</el-form-item>
	  				<el-form-item label="入职时间">
	    				<el-date-picker v-model="bj.joinDate" type="date" placeholder="选择日期"></el-date-picker>
	  				</el-form-item>
	  				<el-form-item label="离职时间" v-if="!bj.status">
	    				<el-date-picker v-model="bj.leaveDate" type="date" placeholder="选择日期"></el-date-picker>
	  				</el-form-item>
	  				<el-form-item label="工资">
	    				<el-input v-model="bj.salary"></el-input>
	  				</el-form-item>
	  				<el-form-item label="身份证号码">
	    				<el-input v-model="bj.IDCard"></el-input>
	  				</el-form-item>
	  				<el-form-item label="手机号码">
	    				<el-input v-model="bj.number"></el-input>
	  				</el-form-item>
  				</el-form>
			   	<div slot="footer">
			    	<el-button @click="bianji = false">取 消</el-button>
			   		<el-button type="primary" @click="xgqd">确 定</el-button>
			   	</div>
			</el-dialog>
		<el-table :data="tableData2">
			<el-table-column prop="ID" label="员工编号"></el-table-column>
		    <el-table-column prop="name" label="姓名"></el-table-column>
		    <el-table-column prop="sex" label="性别"></el-table-column>
		    <el-table-column prop="birthday" label="出生日期"></el-table-column>
		    <el-table-column prop="department" label="部门"></el-table-column>
		    <el-table-column prop="status" label="在职状态">
		    	<template slot-scope="data">
		    		<el-tooltip effect="dark" :content="data.row.joinDate" placement="top">
      					<el-tag v-if="data.row.status">在职</el-tag>			
					</el-tooltip>	
		    		<el-tooltip effect="dark" :content="data.row.leaveDate" placement="top">
     					<el-tag type="success" v-if="!data.row.status">离职</el-tag>
    				</el-tooltip>
				</template>
		    </el-table-column>
		    <el-table-column prop="joinDate" label="入职日期"></el-table-column>
		    <el-table-column prop="leaveDate" label="离职日期"></el-table-column>
		    <el-table-column prop="salary" label="工资"></el-table-column>
		    <el-table-column prop="IDCard" label="身份证号码" width="200px"></el-table-column>
		    <el-table-column prop="number" label="手机号码"></el-table-column>
		    <el-table-column prop="bianj" label="编辑" width="260px">
		    	<template  slot-scope="data">
		    		<el-row>
		    			<el-button type="warning" plain icon="el-icon-edit" @click="xg(data.row)">修改</el-button>
		    			<el-button type="danger" plain icon="el-icon-delete" @click="del(data.row.ID)">删除</el-button>
		    		</el-row>
		    	</template>
		    </el-table-column>
 		</el-table>
	</div>
	<script type="text/javascript">
		 var vue =new Vue({
			el:"#root",
			data:{
				tableData2:[],
				tianjia:false,
				bianji:false,
				status:false,
				tj:{
					name:"",
					sex:"1",
					birthday:"",
					department:"",
					status:this.status,
					joinDate:"",
					salary:"",
					IDCard:"",
					number:""
				},
				bj:{
					ID:"",
					name:"",
					sex:"1",
					birthday:"",
					department:"",
					status:"",
					joinDate:"",
					salary:"",
					IDCard:"",
					number:"",
					leaveDate:""
				}

			},
			methods:{
				// 删除
				del(id){
			        this.$confirm('您确定要删除此条数据?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			        	axios.get("http://127.0.0.1:8086/del?ID="+id).then(function(pons){
			        		if(pons.data == "yes"){
			        			vue.$notify({
			            			type: 'success',
			           				message: '删除成功!'
		         				 })
			        			axios.get("http://127.0.0.1:8086/cx").then(function(pon){
			        				for(let i=0;i<pon.data.length;i++){
										if(pon.data[i].sex == 0){
											pon.data[i].sex = "女"
										}else{
											pon.data[i].sex = "男"
										}
									}
									vue.tableData2 = pon.data
								})
			        		}else{
			        			vue.$message({
			            			type: 'info',
			           			 	message: '删除失败!'
			           			 });
			        		}
			        	})
			          
			        })
 			 	},
 			 	// 注册
 			 	zc(){
 			 		this.tianjia = false;
 			 		axios.get("http://127.0.0.1:8086/zc",{
 			 			params:{
 			 				name:this.tj.name,
							sex:this.tj.sex,
							birthday:this.tj.birthday,
							department:this.tj.department,
							status:this.tj.status,
							joinDate:this.tj.joinDate,
							salary:this.tj.salary,
							IDCard:this.tj.IDCard,
							number:this.tj.number
 			 			}
 			 		}).then(function(pons){
 			 			if(pons.data == "yes"){
 			 				vue.$notify({
	            				type: 'success',
		           				message: '注册成功!'
	         				})
	         				axios.get("http://127.0.0.1:8086/cx").then(function(pon){
								for(let i=0;i<pon.data.length;i++){
									if(pon.data[i].sex == 0){
										pon.data[i].sex = "女"
									}else{
										pon.data[i].sex = "男"
									}
								}
								vue.tableData2 = pon.data;
							})
 			 			}else{
 			 				vue.$message({
		            			type: 'info',
		           			 	message: '注册失败!'
		           			 })
 			 			}
 			 		})
 			 	},
 			 	xg(index){
 			 		for(i in index){
 			 			this.bj[i] = index[i]
 			 		}
 			 		if(this.bj.sex == "男"){
 			 			this.bj.sex = "1"
 			 		}else{
 			 			this.bj.sex = "0"
 			 		}
 			 		if(this.bj.status == "0"){
 			 			this.bj.status = false;
 			 		}else{
 			 			this.bj.status = true;
 			 		}
 			 		this.bianji = true;
 			 		// console.log(this.bj.status)
 			 	},
 			 	xgqd(){
 			 		this.bianji = false;
 			 		axios.get("http://127.0.0.1:8086/xg",{
 			 			params:{
 			 				ID:this.bj.ID,
 			 				name:this.bj.name,
							sex:this.bj.sex,
							birthday:this.bj.birthday,
							department:this.bj.department,
							status:this.bj.status,
							joinDate:this.bj.joinDate,
							salary:this.bj.salary,
							IDCard:this.bj.IDCard,
							number:this.bj.number,
							leaveDate:this.bj.leaveDate
 			 			}
 			 		}).then(function(pons){
 			 			if(pons.data == "yes"){
 			 				vue.$notify({
	            				type: 'success',
		           				message: '编辑成功!'
	         				})
	         				axios.get("http://127.0.0.1:8086/cx").then(function(pon){
								for(let i=0;i<pon.data.length;i++){
									if(pon.data[i].sex == 0){
										pon.data[i].sex = "女"
									}else{
										pon.data[i].sex = "男"
									}
								}
								vue.tableData2 = pon.data;
							})
 			 			}else{
 			 				vue.$message({
		            			type: 'info',
		           			 	message: '编辑失败!'
		           			 })
 			 			}
 			 		}).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消注册'
			          });          
			        });
 			 	}
			},
			mounted(){
				// 查询
				axios.get("http://127.0.0.1:8086/cx").then(function(pon){
					for(let i=0;i<pon.data.length;i++){
						if(pon.data[i].sex == 0){
							pon.data[i].sex = "女"
						}else{
							pon.data[i].sex = "男"
						}
					}
					vue.tableData2 = pon.data;
				})
				
			}
		})
	</script>
</body>
</html>